<template>
    <div class="wrapper">
        <div class="topWrapper">
            <van-search v-model="nameOrPhone" placeholder="请输入搜索关键词" />
        </div>
        <div class="bottomWrapper">
            <div class="item" v-for="item in merchantList" :key="item.ID">
                <div class="top">
                    <div class="left">
                        {{ item.AGENT_NAME }}
                    </div>
                    <div class="right">
                        <div @click.stop="toConfig(item)" class="select" style="margin-right: 20rpx">
                            <span>选择当前服务商</span>
                            <img src="@/assets/chevron-down@2x.png" mode="" />
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">
                        <img src="@/assets/agentImg.png" alt="" />
                    </div>
                    <div class="right">
                        <div class="number">
                            <img src="@/assets/merchantNumberImg.png" mode="" />
                            <span>服务商编号：{{ item.AGENT_NO }}</span>
                        </div>
                        <div class="phone">
                            <img src="@/assets/merchantPhoneImg.png" mode="" />
                            <span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：{{ space(item.PHONE_NO) }}</span>
                        </div>
                        <div class="state">
                            <img src="@/assets/merchantStateImg.png" mode="" />
                            <span>
                                状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                                <span style="color: #07c160" v-if="item.STATUS === statusName[0]">审核通过</span>
                                <span style="color: #eb3941" class="item-last" v-if="item.STATUS === statusName[1]">审核拒绝</span>
                                <span
                                    style="color: #eb3941"
                                    class="item-last"
                                    v-if="item.STATUS !== statusName[1] && item.STATUS !== statusName[0]"
                                >
                                    未认证
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <empty v-if="!merchantList.length"></empty>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { queryList } from '@/api/service'
import { showToast } from 'vant'
import store from '@/store'
export default defineComponent({
    name: 'subAgent',
    setup() {
        const router = useRouter()
        const state = reactive({
            nameOrPhone: '',
            statusName: ['TRUE', 'AUDIT_REJECT'], //列表状态
            merchantList: []
        })
        const getQueryList = () => {
            queryList({
                nameOrPhone: state.nameOrPhone
            }).then(res => {
                state.merchantList = res.object
            })
        }
        const space = name => {
            return name ? name.substr(0, 3) + '****' + name.substr(7) : name
        }
        getQueryList()
        // 成本配置
        const toConfig = item => {
            if (!item.AGENT_NAME) {
                showToast('该用户暂未认证，无法配置成本')
                return
            }

            store.dispatch('data/GetAgentInfo', item)
            router.go(-1)
        }
        // 返现配置
        const toSet = item => {
            if (!item.AGENT_NAME) {
                showToast('该用户暂未认证，无法配置成本')
                return
            }
            router.push({
                path: '/cashBack',
                query: {
                    agentNo: item.AGENT_NO
                }
            })
        }
        return {
            ...toRefs(state),
            space,
            toConfig,
            toSet
        }
    }
})
</script>

<style scoped lang="scss">
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    .bottomWrapper {
        overflow: scroll;
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
        .item {
            margin-bottom: 10px;
            background: #ffffff;
            opacity: 1;
            border-radius: 6px;
            padding: 0 10px;
            .top {
                display: flex;
                justify-content: space-between;
                padding: 10px;
                border-bottom: 1px solid #e4e4e4;
                .right {
                    display: flex;
                    align-items: center;
                    color: #66d6ff;
                    .select:nth-child(2) {
                        margin-left: 20px;
                    }
                    img {
                        width: 20px;
                    }
                    div {
                        display: flex;
                        align-items: center;
                    }
                }
            }
            .bottom {
                display: flex;
                align-items: center;
                padding: 10px;
                .left {
                    img {
                        width: 40px;
                    }
                }
                .right {
                    padding: 0 10px;
                    line-height: 30px;
                    font-size: 13px;
                    img {
                        width: 15px;
                        margin-right: 5px;
                    }
                    .number,
                    .phone,
                    .state {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
        .item:last-child {
            margin: 0;
        }
    }
}
</style>
